<template>
	<view class="app-content-title" @click="more">
		<view class="app-content-title-l">
			<text>{{title}}</text>
			<view class="title-bgc" :style="{backgroundColor: appColor}"></view>
		</view>
		<u-icon v-if="isLink" name="arrow-right" :color="appColor"></u-icon>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				required: true,
				default: ''
			},
			isLink: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			}
		},
		methods: {
			more() {
				if(this.isLink) {
					this.$emit('more')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-content-title {
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		line-height: 32rpx;
		padding: 0 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		.app-content-title-l {
			position: relative;
			.title-bgc {
				display: block;
				content: '';
				width: 8rpx;
				height: 100%;
				position: absolute;
				left: -16rpx;
				top: 0;
			}
		}
	}
</style>